<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Div随鼠标拖动改变高度</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        html, body{ height: 100%; margin: 0; padding: 0; }
        #footer { position:fixed; bottom:0; left:0; width:100%; height:30px; background-color:#B8D0FA;}
        #expander{ width:100%; height:6px; background-color:#999;}
        #expander:hover{ cursor:n-resize;}
    </style>
    <script>
        $(function(){
            var src_posi_Y = 0, dest_posi_Y = 0, move_Y = 0, is_mouse_down = false, destHeight = 30;
            $("#expander")
                    .mousedown(function(e){
                        src_posi_Y = e.pageY;
                        is_mouse_down = true;
                    });
            $(document).bind("click mouseup",function(e){
                if(is_mouse_down){
                    is_mouse_down = false;
                }
            })
                    .mousemove(function(e){
                        dest_posi_Y = e.pageY;
                        move_Y = src_posi_Y - dest_posi_Y;
                        src_posi_Y = dest_posi_Y;
                        destHeight = $("#footer").height() + move_Y;
                        if(is_mouse_down){
                            $("#footer").css("height", destHeight > 30 ? destHeight : 30);
                        }
                    });
        });
    </script>
</head>
<body>
<!--<div style="width:100%;  background-color:#F2F2F2;">
</div>-->
<div id="footer">
    <div id="expander"></div>
    <span id="info">It's Your Contents !</span>
</div>
</body>
</html>